<template>
  <div>
    <the-header-top></the-header-top>
    <logo-bar></logo-bar>
    <div class="personal">
      <div class="personal-container">
        <v-breadcrumb :breadcrumb="breadcrumb"></v-breadcrumb>
        <div class="personal-content">
          <div class="personal-left">
            <div class="personal-credit border-bottom">
              <v-ring :bgColor="bgColor" :coverColor="coverColor" :percent="percent">
                <p class="personal-mask-label">{{ $t('message.availableCredit') }}({{ $t('message.currencySymbol') }})</p>
                <p class="personal-mask-price">{{ availableCredit }}</p>
              </v-ring>
              <div class="personal-credit-total">
                {{$t('message.totalCredit')}}：<span style="white-space: nowrap">฿{{ totalCredit }}</span>
              </div>
              <div class="personal-credit-btn">
                <button class="btn-gradient" type="button" @click="showDialog">{{ $t('message.increaseCredit') }}</button>
              </div>
            </div>
            <div class="personal-link border-bottom">
              <ul>
                <router-link to="/personal/message" tag="li" class="message" active-class="message-active">{{$t('message.messageCenter')}}</router-link>
                <router-link to="/personal/order/0/1" tag="li" class="order" :class="{ 'order-active': routeName }">{{$t('message.myOrder')}}</router-link>
                <router-link to="/personal/bill" tag="li" class="bill" active-class="bill-active">{{$t('message.myBill')}}</router-link>
                <!-- 留着别删 -->
                <!--<router-link to="/personal/discount" tag="li" class="discount" active-class="discount-active">{{$t('message.myDiscount')}}</router-link>-->
                <!-- 留着别删 -->
               <!--  <router-link to="/personal/integral" tag="li" class="integral" active-class="integral-active">{{$t('message.myScore')}}</router-link> -->
              </ul>
            </div>
            <div class="personal-link">
              <ul class="personal-link-bottom">
                <router-link to="/personal/account" tag="li" class="account" active-class="account-active">{{$t('message.accountSettings')}}</router-link>
                <router-link to="/personal/identity" tag="li" class="identity" active-class="identity-active">{{$t('message.identityAuthentication')}}</router-link>
                <router-link to="/personal/address" tag="li" class="address" active-class="address-active">{{$t('message.address')}}</router-link>
              </ul>
            </div>
          </div>
          <div class="personal-right">
            <router-view></router-view>
          </div>
        </div>
      </div>
    </div>
		<!--申请提额弹出框-->
    <v-dialog v-if="status">
    	<div class="quota">
    		<!--关闭按钮-->
    		<div class="close" @click="closeDialog"></div>
    		<!--不合格-->
    		<template v-if="status === 'unqualified'">
    			<img class="background" src="../assets/images/personal/illustration_unqualified.png"/>
	    		<div class="title">{{$t('message.canNoincrease')}}</div>
	    		<div class="tip">{{$t('message.canNoincreaseReason')}}</div>
	    		<div class="btn-group">
	    			<button class="btn btn-gradient" type="button" @click="closeDialog">{{$t('message.yes')}}</button>
	    		</div>
    		</template>
    		<!--审核中-->
    		<template v-if="status === 'underReview'">
    			<img class="background" src="../assets/images/personal/illustration_underReview.png"/>
	    		<div class="title">{{$t('message.increasing')}}</div>
	    		<div class="tip">{{$t('message.noRepeatIncreasing')}}</div>
	    		<div class="btn-group">
	    			<button class="btn btn-gradient" type="button" @click="closeDialog">{{$t('message.yes')}}</button>
	    		</div>
    		</template>
    		<!--申请-->
    		<template v-if="status === 'apply'">
    			<img class="background" src="../assets/images/personal/illustration_apply.png"/>
	    		<div class="title">{{$t('message.applyRaiseQuotaTitle')}}</div>
	    		<div class="tip">{{$t('message.applyRaiseQuotaContent')}}</div>
	    		<div class="btn-group">
	    			<button class="btn btn-gradient" type="button" @click="apply">{{$t('message.applyRaiseQuotaBtnApply')}}</button>
	    			<button class="btn btn-white" type="button" @click="toHelp">{{$t('message.applyRaiseQuotaBtnHelp')}}</button>
	    		</div>
    		</template>
    		<!--成功-->
	    	<template v-if="status === 'submit'">
    			<img class="background" src="../assets/images/personal/illustration_apply_sucess.png"/>
	    		<div class="title">{{$t('message.applyRaiseQuotaSuccessTitle')}}</div>
	    		<div class="tip">{{$t('message.applyRaiseQuotaSuccessContent')}}</div>
	    		<div class="btn-group">
	    			<button class="btn btn-gradient" type="button" @click="closeDialog">{{$t('message.applyRaiseQuotaSuccessBtn')}}</button>
	    		</div>
    		</template>
    	</div>
    </v-dialog>
  </div>
</template>

<script>
import TheHeaderTop from '@/components/base/TheHeaderTop'
import LogoBar from '@/components/base/LogoBar'
import VBreadcrumb from '@/components/base/VBreadcrumb'
import VRing from '@/components/base/VRing'
import VDialog from '@/components/base/VDialog'

export default {
  name: 'Personal',
  components: {
    TheHeaderTop,
    LogoBar,
    VBreadcrumb,
    VRing,
    VDialog
  },
  data () {
    return {
      coverColor: ['#f8b42d', '#ff772e'],
      bgColor: '#f1f1f1',
      totalCredit: null,
      availableCredit: null,
      status: ''
    }
  },
  computed: {
    percent () {
      return this.availableCredit / this.totalCredit
    },
    // 根据当前路由匹配面包屑
    breadcrumb () {
      let arr = [
        {
          name: this.$t('message.home'),
          path: '/'
        }
      ]
      let matched = this.$route.matched
      for (let i = 0; i < matched.length; i++) {
        if (matched[i].meta.breadcrumbName) {
          let obj = {
            name: this.$t('message.' + matched[i].meta.breadcrumbName),
            path: matched[i].path
          }
          arr.push(obj)
        }
      }
      return arr
    },
    routeName () {
      let routeName = this.$route.name
      if (routeName.indexOf('Order') !== -1) {
        return true
      } else {
        return false
      }
    }
  },
  methods: {
    getOrderLimit () {
      this.$ajax.getOrderlimit().then(res => {
        if (res.code === 200) {
          this.totalCredit = res.data.total_quota
          this.availableCredit = res.data.current_quota
        }
      })
    },
    showDialog () {
      this.$ajax.canRaiseQuota().then((res) => {
        if (res.code === 200) {
          this.status = 'apply'
        } else if (res.code === 202 || res.code === 203) {
          this.status = 'unqualified'
        } else if (res.code === 204) {
          this.status = 'underReview'
        }
      })
    },
    closeDialog () {
      this.status = ''
    },
    apply () {
      this.$ajax.raiseQuota().then((res) => {
        console.log(res)
        if (res.code === 200) {
          this.status = 'submit'
        }
      })
    },
    toHelp () {
      this.$router.push({ path: '/help', query: {id: 124} })
    }
  },
  created () {
    this.getOrderLimit()
  }
}
</script>

<style scoped>
.personal {
  min-width: 1200px;
  background-color: #f5f5f5;
  padding: 20px 0 40px;
}

.personal-container {
  width: 1200px;
  margin: 0 auto;
}

.personal-container .personal-content {
  overflow: hidden;
  margin-top: 20px;
}

.personal-left {
  width: 160px;
  float: left;
  background-color: #fff;
  padding: 0 40px;
}

.border-bottom {
  border-bottom: 1px solid #e6e6e6;
}

.personal-credit {
  padding: 53px 0 40px;
}

.personal-mask-label {
  color: #a5a5a5;
  line-height: 17px;
  font-size: 12px;
  text-align: center;
  margin-top: 35px;
}

.personal-mask-price {
  line-height: 31px;
  font-size: 24px;
  font-weight: bold;
  color: #ff600a;
  text-align: center;
  margin-top: 2px;
}

.personal-credit-total {
  font-size: 16px;
  line-height: 22px;
  color: #333;
  text-align: center;
  margin-top: 24px;
}

.personal-credit-btn {
  width: 114px;
  margin: 24px auto 0;
  border-radius: 20px;
  text-align: center;
  overflow: hidden;
}

.personal-credit-btn > button {
  width: 114px;
  height: 40px;
  /*border-radius: 20px;*/
  cursor: pointer;
}

.btn-gradient {
  border: 0;
  color: #fff;
}

.personal-link {
	padding: 40px 0;
}

.personal-link li {
	padding-left: 40px;
	font-size: 14px;
	line-height: 24px;
	color: #333;
	margin-bottom: 24px;
	cursor: pointer;
}

.personal-link li:last-child {
	margin-bottom: 0;
}

.personal-link .message {
  background: url(../assets/images/personal/icon_message_normal.png) no-repeat left center;
}

.personal-link .message:hover, .personal-link .message-active {
  color: #ff600a;
  background: url(../assets/images/personal/icon_message_hover.png) no-repeat left center;
}

.personal-link .order {
  background: url(../assets/images/personal/icon_order_normal.png) no-repeat left center;
}

.personal-link .order:hover, .personal-link .order-active {
  color: #ff600a;
  background: url(../assets/images/personal/icon_order_hover.png) no-repeat left center;
}

.personal-link .bill {
  background: url(../assets/images/personal/icon_bill_normal.png) no-repeat left center;
}

.personal-link .bill:hover, .personal-link .bill-active {
  color: #ff600a;
  background: url(../assets/images/personal/icon_bill_hover.png) no-repeat left center;
}

.personal-link .discount {
  background: url(../assets/images/personal/icon_discount_normal.png) no-repeat left center;
}

.personal-link .discount:hover, .personal-link .discount-active {
  color: #ff600a;
  background: url(../assets/images/personal/icon_discount_hover.png) no-repeat left center;
}

.personal-link .integral {
  background: url(../assets/images/personal/icon_integral_normal.png) no-repeat left center;
}

.personal-link .integral:hover, .personal-link .integral-active {
  color: #ff600a;
  background: url(../assets/images/personal/icon_integral_hover.png) no-repeat left center;
}

.personal-link .account {
  background: url(../assets/images/personal/icon_account_normal.png) no-repeat left center;
}

.personal-link .account:hover, .personal-link .account-active {
  color: #ff600a;
  background: url(../assets/images/personal/icon_account_hover.png) no-repeat left center;
}

.personal-link .identity {
  background: url(../assets/images/personal/icon_identity_normal.png) no-repeat left center;
}

.personal-link .identity:hover, .personal-link .identity-active {
  color: #ff600a;
  background: url(../assets/images/personal/icon_identity_hover.png) no-repeat left center;
}

.personal-link .address {
  background: url(../assets/images/personal/icon_address_normal.png) no-repeat left center;
}

.personal-link .address:hover, .personal-link .address-active {
  color: #ff600a;
  background: url(../assets/images/personal/icon_address_hover.png) no-repeat left center;
}

.personal-link-bottom {
  padding-bottom: 10px;
}

.personal-right {
  width: 944px;
  float: left;
  margin-left: 16px;
  /*height: 100%;*/
  min-height: 755px;
  background-color: #fff;
}

.quota {
	width: 500px;
	background-color: #fff;
	border-radius: 10px;
	position: relative;
  padding-bottom: 20px;
}

.close {
	width: 16px;
	height: 16px;
	background: url(../assets/images/icon_close.png) no-repeat center;
	cursor: pointer;
	position: absolute;
	top: 20px;
	right: 20px;
}

.background {
	width: 220px;
	height: 184px;
	position: absolute;
	top: -85px;
	left: 50%;
	margin-left: -110px;
	-moz-user-select: none;
	-webkit-user-select: none;
	user-select: none;
}

.title {
	line-height: 30px;
	font-size: 22px;
	text-align: center;
	padding-top: 123px;
}

.tip {
	line-height: 20px;
	color: #666;
	text-align: center;
	margin-top: 18px;
}

.btn-group {
	font-size: 0;
	text-align: center;
	margin-top: 40px;
}

.btn {
	width: 132px;
	height: 46px;
	border-radius: 4px;
	cursor: pointer;
	position: relative;
}

.btn-white {
	margin-left: 36px;
}
</style>
